<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <style>
        *{
            margin:0;padding:0;
        }
        body{
            font-size: 14px;color:#fff;
        }
        ul,li{
            list-style: none;
        }
        a{
            text-decoration: none;
        }
        section{
            width:500px;height:500px;
            margin:100px auto;
            background-color: rgba(0,0,0,.1);
        }
        h2{
            color:#4494FF;
            padding:15px 0 8px 0;
            border-bottom: 2px solid #4494FF;
            text-align: center;font-weight: normal;
            font-size: 18px;
        }
        aside{
            float:left;width:150px;padding-top: 50px;
        }
        aside div{
            cursor:pointer;
            color:#fff;
            font-size: 18px;
            padding-left: 35px;
            padding-top:10px;
            padding-bottom:10px;
            background-color: #4494ff;
            margin-bottom: 10px;
            border-radius: 0 7px  7px 0;
            text-indent: 1em;
        }
        article{
            float: right;width:320px;position:relative;
        }
        section:after{
            content:"";
            display: block;
            clear:both;
        }
        article div{
            position: absolute;left:0;top:30px;width:90%;box-sizing:border-box;
            padding-left:10px;
        }
        article div li{
            color:#0b78ff;
            font-size: 15px;
        }
        article div span{
            width:60px;
            display: inline-block;
        }
        article div p{
            color:#fff;margin:5px;
            font-size: 12px;padding-left: 65px;
        }
        /*div.myemail{*/
            /*display: none;*/
        /*}*/
        input{
            width:205px;
            display: inline-block;
            border:none;
            margin-bottom:5px;
            padding:7px 0;
            border-radius: 2px;
            margin-left: 10px;
        }
        input[type=button]{
            margin:30px auto;
            width:100px;
            background: #0b78ff;
        }
        body{
        	background:url(img/testimonial-bg.jpg);
        }
    </style>
</head>
<body>
<section>
    <header>
        <h2>用户注册</h2>
    </header>
    <aside>
        <div class="phone">
            <i></i>
            手机注册
        </div>
         <div class="phone">
            <i></i>
            <a href="login.html" style="color: white;">点击登录</a>
        </div>
        <!--<div class="email">-->
        <!--<i></i>-->
            <!--邮箱注册-->
        <!--</div>-->
    </aside>
    <article>
        <div class="myphone">
            <form action="" method="get" >
                <ul>
                    <li>
                        <span>手机号</span><input type="tel" required>
                        <p>请输入您的手机号</p>
                    </li>
                    <!--<li>-->
                        <!--<span>验证码</span><input type="text" required>-->
                        <!--<p>输入图中字母或数字，不区分大小写</p>-->
                    <!--</li>-->
                    <!--<li>-->
                        <!--<span>校验码</span><input type="text" required>-->
                        <!--<p>请输入短信中6位数字校验码</p>-->
                    <!--</li>-->
                    <li>
                        <span>用户名</span><input type="text" required id="user">
                        <p>2-14个字符：英文、数字或中文</p>
                    </li>
                    <li>
                        <span>密码</span><input type="password" required>
                        <p>6-20个字符，区分大小写</p>
                    </li>
                    <!--<li>-->
                        <!--<span>确认密码</span><input type="password" required>-->
                        <!--<p>请再次输入密码</p>-->
                    <!--</li>-->
                </ul>
                <input type="button" value="马上注册">
            </form>
        </div>
        <!--<div class="myemail">-->
            <!--<ul>-->
                <!--<li>邮箱<input type="email" required name="email"></li>-->
                <!--<li>用户名<input type="text" required></li>-->
                <!--<li>密码<input type="password" required></li>-->
                <!--<li>确认密码<input type="password" required></li>-->
                <!--<li>验证码<input type="text" required></li>-->
            <!--</ul>-->
            <!--<input type="submit" value="马上注册">-->
        <!--</div>-->
    </article>
</section>
</body>
<script>
    var tel=document.querySelector("[type=tel]");
    var user=document.querySelector("#user");
    var password=document.querySelector("[type=password]");
    var register=document.querySelector("[type=button]");
    if(localStorage.message){
            var arr=JSON.parse(localStorage.message);
        }else{
            var arr=[];
    }
    register.onclick=function () {
        var obj={tel:tel.value,user:user.value,password:password.value};
        arr.push(obj);
        localStorage.message=JSON.stringify(arr);
        //转换为字符串格式
        location.href="login.html";
    }
</script>
</html>